<template>
  <div class="hot-pro">
    <div class="product">
      <div class="hot-tit">
        <div class="left">{{ this.headTitle }}</div>
        <div class="right">
          <el-input
            v-model.trim="searchVal"
            placeholder="请输入搜索关键字"
            suffix-icon="el-icon-search"
            @keyup.native.enter="queryList"
          ></el-input>
        </div>
      </div>
      <!-- 产品列表 -->
      <div class="hot-con">
        <div class="con-noitem" v-if="this.typeList.length === 0">
          暂时无信用卡
        </div>
        <div class="con-item" v-for="(item, index) in typeList" :key="index">
          <p class="title">{{ item.creditTypeName }}</p>
          <div class="detail">
            <div class="left">
              <div class="pro-img">
                <img :src="item.picUrl" alt="图片显示失败" />
                <!-- <banner
                    :imgList="imgList"
                    height="110px"
                    :indiPosition="indiPosition"
                    :arrow="arrow"
                    :autoplay="isAutoplay"
                  >
                    <template slot="content" slot-scope="data">
                      <img :src="data.data.item" alt="" />
                    </template>
                  </banner> -->
              </div>
              <p class="desc">{{ item.creditTypeDesc }}</p>
            </div>
            <div class="right">
              <div class="desc-one">
                <span>臻享乐趣</span>
              </div>
              <div class="desc-one">
                <span>臻享健康</span>
              </div>
              <div class="desc-one">
                <span>臻享旅程</span>
              </div>
              <div class="desc-link">
                <!-- <a href="javascript:;">臻享财富</a> -->
                <a href="javascript:;" @click="handleYearRule(item)"
                  >年费规则</a
                >
              </div>
              <div class="btn-item">
                <button type="primary" @click="handleApply(item)">
                  立即申请
                </button>
              </div>
            </div>
          </div>
          <div class="corner"></div>
        </div>
      </div>
      <!-- 分页栏 -->
      <div class="hot-page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 猜你想要 -->
    <div class="u-want">
      <span>猜你想要: </span>
      <el-tag
        class="tag-icon"
        v-for="item in items"
        :key="item.label"
        :type="item.type"
        effect="plain"
      >
        {{ item.label }}
      </el-tag>
    </div>
    <div class="rank" v-if="this.rankList.length">
      <div class="title">人气排行榜</div>
      <div class="content">
        <banner
          :imgList="rankList"
          height="140px"
          :indiPosition="indiPosition"
          :arrow="arrow"
        >
          <template slot="content" slot-scope="rank">
            <div
              class="item"
              v-for="(item, index) in rank.data.item"
              :key="index"
            >
              <div class="title">
                <span class="left">{{ item.showOrder }}</span>
                <span>{{ item.creditTypeName }}</span>
              </div>
              <div class="detail">
                <div class="left">
                  <img :src="item.picUrl" alt="图片显示失败" />
                </div>
                <div class="right">
                  <p class="desc-one">{{ item.showOrder }}</p>
                  <p class="desc-one">{{ item.creditTypeDesc }}</p>
                  <div class="btn-item">
                    <button class="btn-plain">申请</button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </banner>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Banner from '../../components/Banner'
export default {
  name: 'HotProduct',
  mixins: [],
  components: {
    Banner
  },
  props: {
    tab: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      headTitle: '',
      keyword: '', // 卡种
      searchVal: '', // 搜索词
      pageNum: 1,
      pageSize: 10,
      total: 0, // 总条数
      items: [
        { type: '', label: '高端系列' },
        { type: '', label: '青春系列' }
      ],
      typeList: [],
      imgList: [],
      indiPosition: 'none', // 是否有dots
      isAutoplay: false, // 是否自动播放
      arrow: 'always', // 箭头的出现效果
      rankList: []
    }
  },
  computed: {},
  watch: {
    tab: {
      deep: true,
      immediate: true,
      handler (val) {
        this.headTitle = val.creditTypeName
        if (this.$parent.$data.currentIdx === 0) {
          this.keyword = ''
        } else {
          this.keyword = val.id
        }
        this.queryList()
      }
    }
  },
  methods: {
    queryList () {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.keyword
      }
      if (this.searchVal) {
        Object.assign(params, { searchCriteria01: this.searchVal })
      }
      // this.$remote('/runtime/pocCreditType/selectPocCreditType.action', params).then((res) => {
      this.$remote('/runtime/pocCreditType/selectPocCreditTypeFront.action', params).then((res) => {
        this.typeList = res.list
        this.total = res.totalCount
        // 小轮播列表
        // this.imgList = res.list.map(item => {
        //   return item.picUrl
        // })
        // 底部轮播图
        let arr = res.list.slice(0, 9)
        for (let i = 0; i < arr.length; i += 3) {
          arr.slice(i, i+3)
          this.rankList.push(arr.slice(i, i+3))
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.queryList()
      document.documentElement.scrollTop = document.body.scrollTop = 200
    },
    // 点击年费规则
    handleYearRule (item) {
      this.$alert(`${item.creditAnnuaFee}元人民币/年, 年费将于激活后收取, 首年免年费, 刷卡满3笔见面次年年费`,
      '年费规则', {
        confirmButtonText: '确定'
      })
    },
    // 立即申请
    handleApply (item) {
		window.sa.track("$CollectGetCreditClick", {
			'$element_content': item.id
		});
      this.$router.push({
        name: 'selectCard',
        params: {
          id: item.id,
          isHeader: false
        }
      })
    }
  },
  filters: {},
  mounted () {},
  created () {
    // 查询 卡列表
    this.queryList()
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.Banner
  width 100%
.hot-pro
  & >>> .el-input__inner
    height 24px
    line-height 36px
    font-size 12px
  & >>> .el-input__icon
    line-height 36px
  & >>> .el-tag
    height 24px
    line-height 20px
  & >>> .el-tag--plain
    border-color #06469e
    color #06469e
  & >>> .el-pagination.is-background .el-pager li:not(.disabled).active
    background-color #06469e
  .product
    border 1px solid #eee
    .hot-tit
      height 24px
      line-height 36px
      padding 10px 10px
      padding-bottom 40px
      .left
        float left
        color #000000
        font-weight 600
      .right
        float right
    .hot-con
      display flex
      flex-wrap wrap
      justify-content space-between
      .con-noitem
        width 100%
        padding 20px 10px
      .con-item
        width 48%
        margin 1%
        // width 49%
        // margin .5%
        height auto
        box-sizing border-box
        text-align center
        padding 10px 0
        background-color #f6f6f6
        display flex
        flex-direction column
        position relative
        .corner
          position absolute
          top 0
          right 0
          width 12px
          height 12px
          background url('../../assets/creditApplyImg/ico01.gif')
        .title
          text-align left
          padding 5px 20px
        .detail
          width 100%
          display flex
          .left
            width 50%
            box-sizing border-box
            .pro-img
              width 100%
              // padding 0px 20px
              img
                width 80%
              // .Banner
              //   width 100%
              //   & >>> .el-carousel--horizontal
              //     width 100%
              //     padding 0px 20px
              //     .el-carousel__container
              //       width 100%
              //       padding 0px 20px
              //       .el-carousel__arrow
              //         background-color transparent
              //         color #000
              //         font-size 14px
              //       .el-carousel__arrow--left
              //         left -25px
              //       .el-carousel__arrow--right
              //         right -25px
            .desc
              margin-top 5px
          .right
            flex 1
            padding 0px 5px
            text-align left
            .desc-one
              font-size 12px
              line-height 18px
            .desc-link
              a
                color #304793
                font-size 12px
                display inline-block
                padding-right 30px
            .btn-item
              margin-top 10px
              button
                cursor pointer
                font-size 12px
                border-radius 3px
                color #fff
                padding 2px 6px
                background-color #06469e
                border 1px solid #06469e
    .hot-page
      margin 0 auto
      text-align center
      padding 20px
  .u-want
    text-align left
    padding 10px
    margin-top 10px
    border 1px solid #eee
    .tag-icon
      margin-left 10px
  .rank
    text-align left
    margin-top 10px
    margin-bottom 10px
    border 1px solid #eee
    .title
      padding 5px 10px
      line-height 30px
      font-weight 600
      color #000
    .content
      display flex
      width 100%
      padding-bottom 10px
      justify-content space-between
      position relative
      .Banner
        width 100%
        & >>> .el-carousel--horizontal
          padding 0px 20px
          .el-carousel__arrow
            background-color transparent
            top 60%
          .el-carousel__arrow--left
            left -25px
            color #000
          .el-carousel__arrow--right
            right -25px
            color #000
          .item
            width 33%
            display flex
            float left
            flex-direction column
            .title
              display flex
              font-weight 100
              font-size 12px
              padding 5px 0
              span.left
                width 12px
                height 12px
                line-height 12px
                margin-top 10px
                margin-right 5px
                display block
                text-align center
                color #fff
                background-color #06469e
            .detail
              display flex
              width 100%
              .left
                width 50%
                padding 0 5px
                img
                  width 100%
              .right
                width 50%
                padding 0 10px
                display flex
                flex-direction column
                .desc-one
                  font-size 12px
                  line-height 20px
                .btn-item
                  margin-top 5px
                  .btn-plain
                    cursor pointer
                    border 1px solid #06469e
                    background-color #fff
                    color #06469e
                    border-radius 3px
                    padding 2px 6px
                    outline none
                    font-size 12px
                    line-height 12px
</style>
